<%--
  Created by IntelliJ IDEA.
  User: ykq
  Date: 2022/10/11
  Time: 9:20
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <!--引入elementui得样式-->
    <link type="text/css" rel="stylesheet" href="/css/index.css"/>
    <!--引入vue得依赖必须再elementui之前引入vue-->
    <script type="text/javascript" src="/js/vue.js"></script>
    <script type="text/javascript" src="/js/index.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <script type="text/javascript" src="/js/qs.min.js"></script>
</head>
<body>
   <div id="app">
       <el-table
               :data="tableData"
               border
               style="width: 100%">
           <el-table-column
                   prop="roleId"
                   label="编号"
                   width="100">
           </el-table-column>
           <el-table-column
                   prop="roleName"
                   label="名称"
                   width="180">
           </el-table-column>
           <el-table-column
                   prop="roleDesc"
                   label="描述">
           </el-table-column>

           <el-table-column label="操作">
               <template slot-scope="scope">
                   <el-button @click="handleClick(scope.row)" type="text" size="small">删除</el-button>
                   <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
                   <el-button type="text" size="small" @click="showRoleDialog(scope.row.roleId)">分配权限</el-button>
               </template>
           </el-table-column>
       </el-table>
        <%--为用户分配角色--%>
       <el-dialog
               title="分配权限"
               :visible.sync="dialogVisible01"
               width="30%"
               >
           <el-tree
                   :data="data"
                   show-checkbox
                   node-key="id"
                    ref="rootTree"
                   :props="defaultProps">
           </el-tree>
           <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible01 = false">取 消</el-button>
            <el-button type="primary" @click="qr">确 定</el-button>
          </span>
       </el-dialog>
   </div>
</body>
<script>
     var app=new Vue({
          el:"#app",
          data:{
               tableData:[],
               currentPage:1,
               pageSize:5,
               total:0,
               roleVo:{},
               dialogVisible01:false,
               //属性数据
               data: [

               ],
              checkIds:[],
              defaultProps: {
                  children: 'children',
                  label: 'name'
              },
              roleId:0,

          },
          created(){
             this.initTable();
          },
          methods:{
              //确认分配角色
              qr(){
                  //获取被选中的权限ids
                 let checkIds=this.$refs.rootTree.getCheckedKeys();
                 let halfIds=this.$refs.rootTree.getHalfCheckedKeys();
                  let ids=checkIds.concat(halfIds);
                  axios.post("/permission/qr?roleId="+this.roleId+"&permissionIds="+ids).then(resp=>{
                       this.$message.success("分配成功");
                       this.dialogVisible01=false;
                  })
              },

              showRoleDialog(roleId){
                  this.roleId=roleId;
                 this.dialogVisible01=true;
                  //1. 查询所有的权限
                  //2. 当前角色具有的权限ID
                  axios.get("/permission/list?roleId="+roleId).then(resp=>{
                        this.data=resp.data.data.firsts;
                        this.checkIds=resp.data.data.permissionIds;
                      //默认选中的树的数据
                        setTimeout(() =>{
                            resp.data.data.permissionIds.forEach(value => {
                              this.$refs.rootTree.setChecked(value, true, false);
                            })}, 100)
                  })
              },

               initTable(){
                   axios.post("/role/all?currentPage="+this.currentPage+"&pageSize="+this.pageSize,this.roleVo).then(resp=>{
                         this.tableData=resp.data.data.list;
                         this.total=resp.data.data.total;
                   });
               }
          }
     })
</script>
</html>
